/**
 * @file filter
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import * as pick from 'lodash/pick';
import * as omit from 'lodash/omit';
import * as assign from 'object-assign';
import {Renderer, renderChildren, filter} from '../renderer';
import PopOverAble from '../hoc/pop-over';
import DataTip from '../hoc/data-tip';
import Copyable from '../hoc/copyable';
const TDProps = ['className', 'style', 'onClick', 'onMouseEnter', 'onMouseLeave', 'onKeyDown', 'onKeyUp', 'onKeyPress'];
import onExpression from '../hoc/on-expression';

@Renderer({
  name: 'form-field',
  desc: '...',
  test: /(?:^|\/)form-item\/field$/
})
@onExpression
@PopOverAble
@DataTip
@Copyable
export default class FormField extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    type: PropTypes.string.isRequired,
    placeholder: PropTypes.string,
    innerClassName: PropTypes.string
  };

  render() {
    const {
      prefix,
      $path,
      affix,
      innerClassName,
      inputClassName,
      width,
      dataTip,
      body,
      tabIndex
    } = this.props;
    let tdProps = pick(this.props, TDProps);
    let rest = omit(this.props, TDProps);

    let style = this.props.style;

    if (width) {
      style = assign({}, style, {
        width
      });
    }

    return (
      <div {...tdProps} style={style} data-tip={dataTip || null} tabIndex={tabIndex}>
        {prefix}
        {typeof body === 'undefined' ? renderChildren($path, assign(rest, {
            className: inputClassName || innerClassName
          })) : body}
        {affix}
      </div>
    );
  }
}
